{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">🩺</div>
      <div>
        <h1 class="h1" style="margin:0">{{ title }}</h1>
        <div class="small">Fill the details below.</div>
      </div>
      <div style="margin-left:auto">
        <a class="btn" href="{% url 'website:staff_service_list' %}">← Back</a>
      </div>
    </div>
    <div class="sep"></div>

    <form method="post">
      {% csrf_token %}
      <div class="grid" style="grid-template-columns:1fr 1fr;gap:12px">
        <div>
          <label class="label">Title</label>
          {{ form.title }}
        </div>
        <div>
          <label class="label">Icon (emoji)</label>
          {{ form.icon }}
        </div>
      </div>

      <div style="margin-top:12px">
        <label class="label">Short description</label>
        {{ form.short_description }}
      </div>
      <div style="margin-top:12px">
        <label class="label">Who it's for</label>
        {{ form.who_its_for }}
      </div>
      <div style="margin-top:12px">
        <label class="label">Benefits</label>
        {{ form.benefits }}
      </div>

      <div class="grid" style="grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px">
        <div>
          <label class="label">Featured?</label>
          {{ form.is_featured }}
        </div>
        <div>
          <label class="label">Sort order</label>
          {{ form.sort_order }}
        </div>
        <div>
          <label class="label">Slug</label>
          {{ form.slug }}
          <div class="small">Leave blank to auto-generate.</div>
        </div>
      </div>

      <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:14px">
        <button class="btn" type="submit">Save</button>
      </div>
    </form>
  </div>
</section>
{% endblock %}